<template>
  <div class="tel" @click="visible = true">
    <p class="desc">技术支持电话</p>
    <p class="desc">如有问题请点击此处查看技术支持电话</p>
    
    <van-popup
      v-model:show="visible"
      position="bottom"
      round
      teleport="#app"
      :style="{ height: '70vh' }"
      closeable
    >
      <div class="tel-list">
        <h3>技术支持联系方式</h3>
        <div class="box">
          <h4 class="name">1.解绑和各村、乡镇权限问题</h4>
          <p class="item" v-for="item in dataList?.xfdata" :key="item.id">
            {{ item.name }}
            <a :href="`tel:${item.phone}`">{{ item.phone }}</a>
          </p>
          <h4 class="name">2.技术问题</h4>
          <p class="item" v-for="item in dataList?.sysdata" :key="item.id">
            {{ item.name }}
            <a :href="`tel:${item.phone}`">{{ item.phone }}</a>
          </p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getPhone } from '@/service/api'
const visible = ref(false)
const dataList = ref([])

const getData = async () => {
  const result = await getPhone()
  dataList.value = result?.data
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="less">
.tel {
  width: 100%;
  text-align: center;
  .desc {
    margin-top: 12px;
    &:nth-child(1) {
      color: var(--van-primary-color);
      text-decoration: underline;
    }
  }
}
.tel-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  h3 {
    text-align: center;
    padding: 24px 0;
  }
  h4 {
    margin: 24px 0 12px;
  }
  .box {
    flex: 1;
    overflow: auto;
    padding: 0 32px;
    .item {
      height: 80px;
      line-height: 80px;
      display: flex;
      border-bottom: 2px solid var(--border-color);
      a {
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>